<template>
  <div class="water-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '水波图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import WaterChart01 from './components/waterChart01.vue';
import WaterChart02 from './components/waterChart02.vue';
import WaterChart03 from './components/waterChart03.vue';

const chartComponents = [
  { name: 'WaterChart01', component: WaterChart01, label: '水波图' },
  { name: 'WaterChart02', component: WaterChart02, label: '水波图' },
  { name: 'WaterChart03', component: WaterChart03, label: '水波图' },
];
const chartPreviewRef = ref(null);
const openChartPreview = (component) => {
  chartPreviewRef.value.open(component);
};
</script>

<style scoped></style>
